<template>
    <text class="iconfont" :class="name" :style="[{ color: color }, { 'font-size': size }]"></text>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: '16px'
        }
    }
};
</script>

<style scoped>
@import url('@/static/iconfont/iconfont.css');

.iconfont {
    flex-shrink: 0;
    display: inline-flex;
    font-size: inherit;
    overflow: hidden;
    /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    vertical-align: -0.15em;
    outline: none;
    /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    fill: currentcolor;
}
</style>
